<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-04-15 17:49:23
 * @Description: 
 * @FilePath: \hmcs_map\src\components\project\fakeLegend.vue
-->
<template>
  <div
    class="d-flex legendBox"
    :class="{ colorBlock }"
    style="font-size: 20px"
    :style="{
      flexDirection: orient == 'row' ? 'row' : 'column',
      justifyContent: orient == 'row' ? 'end' : 'space-evenly',
    }"
  >
    <div v-for="(item, index) of color" class="d-flex legend">
      <div :style="{ backgroundColor: color[index] }" class="color"></div>
      <div style="font-family: 'OPPOSans-Regular'; flex: auto">
        {{ text[index] }}
      </div>
      <div
        v-if="value[index]"
        :style="{color: color[index]}"
        style="
          margin-left: 20px;
          font-family: 'OPPOSans-Regular';
        "
      >
        {{ value[index] }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  color: {
    type: Array<string>,
    default: () => [],
  },
  text: {
    type: Array<string>,
    default: () => [],
  },
  value: {
    type: Array<Number>,
    default: () => [],
  },
  orient: {
    type: String,
    default: "row",
  },
  colorBlock: {
    type: Boolean,
    default: false,
  },
});
const orientStyle = computed(() => ({
  flexDirection: props.orient === "horizontal" ? "column" : "",
}));
onMounted(() => {});
</script>

<style scoped lang="less">
.colorBlock {
  .color {
    width: 26px;
    height: 26px;
  }
}
.color {
  width: 24px;
  height: 10px;
  margin: 0 10px;
}
.legend {
  display: flex;
  align-items: center;
}
</style>
